<template>
	<common-card class="portal_inspection_situation">
		<dl v-for="(item, index) in allDatas" :key="index">
			<dt :style="{ color: item.color }">{{ item.value }}</dt>
			<dd>{{ item.name }}</dd>
		</dl>
	</common-card>
</template>

<script lang="ts" setup>
import commonCard from '../commonCard.vue';
defineOptions({ name: 'InspectionSituation' });
const situationData = reactive([
	{ name: '院领导', value: 3, color: '#0f73fc' },
	{ name: '督导专家', value: 5, color: '#41ae84' },
	{ name: '系室领导', value: 7, color: '#ffac03' }
]);
const allDatas = computed(() => {
	let total = situationData.reduce((prev: any, cur: any) => {
		return prev + cur.value;
	}, 0);
	return [{ name: '总次数', value: total, color: '#273445' }, ...situationData];
});
</script>

<style lang="scss" scoped>
.portal_inspection_situation {
	&:deep(.arco-card-body) {
		gap: 16px;
		padding: 16px !important;
	}
	dl {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
		border-radius: 4px;
		flex: 1;
	}
	dt {
		font-size: 24px;
		font-weight: 700;
		line-height: 1.5;
		padding: 0 16px;
		flex-shrink: 0;
		color: #333;
		border-right: solid 1px #ddd;
	}
	dd {
		flex: 1;
		color: #666;
		font-size: 14px;
		text-align: center;
	}
}
</style>
